/**
{
"style":{
"navigationBarTitleText":"地址管理",
"navigationStyle": "default"
}
}
*/
<template>
	<view class="page-bg">
		<!-- <u-list @scrolltolower="scrolltolower"> -->
		<view :class="[isiPhone? 'pb-230':'pb-120', 'order-list']" v-if="list && list.length">
			<!-- <u-list-item v-for="(item, index) in list" :key="index"> -->
			<view class="item" v-for="(item, index) in list" :key="index" @click="onSelect(item)">
				<view class="header flex-tbc">
					<view class="name">{{item.name}}</view>
					<view class="iPhone">{{item.mobile}}</view>
				</view>
				<view class="address">
					{{item.area}} {{item.address}}
				</view>

				<view class="footer-base flex-tbc">
					<view class="moren flex-tbc" @click.stop="onMeren(item, index)">
						<image class="radio-icon" src="__ROOT__/common/images/radio1.png" mode=""
							v-if="item.is_default == 1"></image>
						<image class="radio-icon" src="__ROOT__/common/images/radio.png" mode="" v-else></image>
						<text class="radio-text">默认地址</text>
					</view>

					<view class="btns display_flex">
						<view class="btn btn1" @click.stop="jumpEdit(item)">
							编辑
						</view>
						<view class="btn btn2" @click.stop="onDelAddress(item, index)">
							删除
						</view>
					</view>
				</view>
			</view>
			<!-- </u-list-item> -->
		</view>
		<view class="pt120" v-else>
			<u-empty mode="list" text="暂无地址">
			</u-empty>
		</view>

		<!-- </u-list> -->
		<view :class="[isiPhone? 'pb-68':'pb-32', 'fixed_b', 'bg-f']" @click="addAddress">
			<view class="plr24">
				<view class="btn-w" @click="addAddress">
					新增地址
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	const isiPhone = ref('')
	const statusBar = ref('')
	const customBar = ref('')
	const pageType = ref('')
	const getPageInfo = () => {}
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone')
		statusBar.value = uni.getStorageSync('statusBar')
		customBar.value = uni.getStorageSync('customBar')
	}

	const list = ref()

	const addAddress = () => {
		uni.navigateTo({
			url: '/pages/address/address/add'
		})
	}
	const onSelect = (item) => {
		if(pageType.value == 'order') {
			uni.setStorageSync('addressId', item.id)
			uni.navigateBack({
				delta: 1
			})
		}
	}
	const jumpEdit = (item) => {
		uni.navigateTo({
			url: '/pages/address/address/add?id=' + item.id
		})
	}

	// 删除地址
	const onDelAddress = (item, index) => {
		uni.showModal({
			title: '提示',
			content: '确定删除？',
			cancelText: '取消',
			confirmText: '确认',
			// 按钮颜色
			
			showCancel: true,
			success: async function(res) {
				if (res.confirm) {
					const res = await $post("/user/del_address", {
						id: item.id
					})
					uni.showToast({ //提示
						title: '删除成功'
					})
					getAddressList()
				} else {
					console.log('用户点击取消');
				}
			}
		});

	}
	// 设置默认地址
	const onMeren = async (item, index) => {

		const res = await $post("/user/set_mo_address", {
			id: item.id
		})


		list.value.map(item1 => {
			if (item.id == item1.id) {
				item1.is_default = 1
			} else {
				item1.is_default = 0
			}
		})
		uni.showToast({ //提示
			title: '设置成功'
		})
	}

	const getAddressList = async () => {
		const res = await $post("/user/get_my_address")
		list.value = res.list
	}
	Vue.onShow(() => {
		initPage()
		getAddressList()
	})

	Vue.onLoad((options) => {
		pageType.value = options.type
	})
</script>
<style scoped lang='scss'>
	.order-list {
		padding-left: 14rpx;
		padding-right: 14rpx;

		.item {
			padding: 40rpx 30rpx 18rpx 24rpx;
			background-color: #fff;
			margin-top: 30rpx;
			box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(45, 99, 103, 0.08);
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			.header {
				font-family: PingFang SC, PingFang SC;
				color: #333333;

				.name {
					font-weight: bold;
					font-size: 36rpx;
				}

				.iPhone {
					font-weight: 400;
					font-size: 32rpx;
					margin-left: 20rpx;
				}
			}

			.address {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 42rpx;
				margin-top: 12rpx;
				padding-bottom: 30rpx;
			}
		}
	}

	.footer-base {
		border-top: 1rpx solid #DBDBDB;
		padding-top: 18rpx;
		padding-right: 6rpx;

		.moren {
			.radio-icon {
				width: 36rpx;
				height: 36rpx;
			}

			.radio-text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				padding-left: 12rpx;
			}
		}

		.btns {
			margin-left: auto;

			.btn {
				width: 68rpx;
				height: 44rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				text-align: center;
				line-height: 42rpx;

				&.btn1 {
					border: 1rpx solid #0F956E;
					color: #0F956E;
				}

				&.btn2 {
					border: 1rpx solid #B9B9B9;
					color: #B9B9B9;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>